<template>
  <div class="address-edit-box">
    <s-header :name="`${type == 'add' ? '新增地址' : '编辑地址'}`" />
    <van-address-edit
      class="edit"
      :area-list="areaList"
      :address-info="addressInfo"
      :show-delete="type == 'edit'"
      show-set-default
      show-search-result
      :search-result="searchResult"
      :area-columns-placeholder="['请选择', '请选择', '请选择']"
      @save="onSave"
      @delete="onDelete"
      @change-detail="onChangeDetail"
    />
  </div>
</template>

<script>
import { reactive, onMounted, toRefs } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import sHeader from '@/components/SimpleHeader';
import areaList from '../common/js/city'; 
import { Toast } from 'vant';
import { addAddress, EditAddress, DeleteAddress, getAddressDetail } from '@/service/address'
export default {
    components:{
        sHeader
    },
    setup() {
        const route = useRoute()
        const router = useRouter()
        const state = reactive({
            areaList,
            searchResult: [],
            type: 'add',
            addressId: '',
            addressInfo: {},
            from: route.query.from
        })
        const onChangeDetail = (val) =>{
          if (val) {
                state.searchResult = [
                {
                    name: '黄龙万科中心',
                    address: '杭州市西湖区',
                },
                ];
            } else {
                state.searchResult = [];
            }
        }
        const onSave = async(content) => {
            const params = {
                userName: content.name,
                userPhone: content.tel,
                provinceName: content.province,
                cityName: content.city,
                regionName: content.county,
                detailAddress: content.addressDetail,
                defaultFlag: content.isDefault ? 1 : 0,
            }
            if(state.type == 'edit') params['addressId'] = state.addressId;
            await state.type == 'add' ? addAddress(params) : EditAddress(params);
            Toast('保存成功')
            setTimeout(() => {
                router.back()
            }, 1000)
        }
        const onDelete = async() =>{
            await DeleteAddress(state.addressId)
            Toast('删除成功');
            setTimeout(() => {
                router.back()
            }, 1000)
        }
        onMounted(async () => {
          onChangeDetail()
            const { addressId, type, from } = route.query
            state.addressId = addressId
            state.type = type
            state.from = from || ''
            if (type == 'edit') {
                const {data:addressDetail} = await getAddressDetail(addressId);
                let _areaCode = ''
               
                // Object.entries(state.areaList.county_list).forEach(([id, text]) => {
                //     if (text == addressDetail.regionName) {
                //         const provinceIndex = province.findIndex(item => item.id.substr(0, 2) == id.substr(0, 2))
                //         const cityItem = Object.entries(state.areaList.city_list).filter(([cityId]) => cityId.substr(0, 4) == id.substr(0, 4))[0]
                //         if (province[provinceIndex].text == addressDetail.provinceName && cityItem[1] == addressDetail.cityName) _areaCode = id
                //     }
                // })
                state.addressInfo = {
                    id: addressDetail.addressId,
                    name: addressDetail.userName,
                    tel: addressDetail.userPhone,
                    province: addressDetail.provinceName,
                    city: addressDetail.cityName,
                    county: addressDetail.regionName,
                    addressDetail: addressDetail.detailAddress,
                    areaCode: _areaCode,
                    isDefault: !!addressDetail.defaultFlag
                }
            }
        })
        return {
            ...toRefs(state),
            onSave,
            onDelete,
            onChangeDetail
        }
    }
}
</script>

<style lang="scss" scoped>
@import '@/common/style/mixin';
.edit {
    .van-field__body {
      textarea {
        height: 26px !important;
      }
    }
}
.address-edit-box{
    .van-address-edit {
      .van-button--danger{
        background: $primary ;
        border-color: $primary ;
      }
      .van-switch--on {
        background: $primary;
      }
    }
}

</style>